<template>
  <view class="container">
    <image class="userinfo-bg" src="../../static/img/home_pic_topbg@2x.png" mode="widthFix"></image>
    <view class="userinfo">
      <view class="userinfo-content">
        <!--<image class="userinfo-avatar" src="../../static/img/home_pic_touxiang@2x.png"></image>-->


        <!--    2024，先登录再通过点击该热区事件进入下一页面更新头像与昵称    -->

        <view class="userinfo-avatar">
          <image class="userinfo-avatar" v-if="userInfo == '' || userInfo.photo_url==''" @click="updateInfoShow"
                 src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/dang/default-photo.png"></image>
          <image class="userinfo-avatar" v-if="userInfo != ''" :src="userInfo.photo_url" @click="updateInfoShow"></image>
        </view>
        <view class='info-box'>
          <view class="userinfo-realname">
            <view class='user-phone' v-if="userInfo != ''" @click="updateInfoShow">{{ userInfo.nickname }}</view>
<!--            <view class='user-phone' @click="handleJump('login/login')" v-else>点击登录</view>-->
            <view class='user-phone' @click="show=true" v-else>点击授权登录</view>
          </view>
          <!--<view class='user-phone'>{{info.user.phone}}</view>
          <view class="userinfo-address">{{ info.address }}</view>-->
        </view>
      </view>
      <view class="userinfo-address" style="width: 100%;display: flex;margin-left: 213rpx"
            v-if="userInfo !='' && userInfo.realname != null && userInfo.realname!=''">真实姓名：{{ userInfo.realname }}
      </view>
    </view>

    <view class="page-items">

      <view class="page-item" @click="handleJump('home/home')">
        <image class="page-item-logo" src="../../static/img/meeting.png"></image>
        <text class="page-item-title">会议</text>
        <image class="page-item-jump" src="../../static/img/list_ic_arrow@2x.png"></image>
      </view>

      <view class="page-item" @click="handleJump('programme/set')">
        <image class="page-item-logo" src="../../static/img/shebei.png"></image>
        <text class="page-item-title">节目单设置</text>
        <image class="page-item-jump" src="../../static/img/list_ic_arrow@2x.png"></image>
      </view>

    </view>


    <u-popup @touchmove.native.stop v-model="show" @close="handleClose"
             border-radius="12" mode="center" width="80%">
      <view class="popup-container">
        <view class="shopping-name">人工智能党建</view>
        <div @click="bindGetUserInfo" style='border: 1px solid #dcdcdc;width: 50%;margin: 0 auto;border-radius: 25rpx;overflow: hidden;'>
         <!-- <div class="login-mode">
           <image class="mode-icon" mode="widthFix" src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/dang/default-photo.png" />
            <image class="mode-icon" mode="widthFix" src="../../static/img/logo.png" />
          </div> -->
          <div class="login-mode" style='background-color:#e21918 ;color: #fff;padding-bottom: 25rpx;'>
            <text class="mode-name">点击授权登录</text>
          </div>
        </div>
        <div class="login-mode">
          <view class="desc">
            <text>人工智能党建助手手机端介绍：</text>
            <text>1、参与内部会议</text>
            <text>2、手机同步PPT内容</text>
            <text>3、参与会议讨论</text>
          </view>
        </div>


<!--        <view class="login-desc">-->
<!--          <uni-data-checkbox multiple selectedTextColor="#666" v-if="initial"-->
<!--                             selectedColor="#ef7b56" @change="protocolChange"-->
<!--                             :localdata="[{value: 0, text: '我已阅读并同意'}]" />-->
<!--          <text class="prefix-text" v-else>我已阅读并同意</text>-->
<!--          <text class="user-agreement" @click="toAgreement">《用户服务协议》</text>-->
<!--        </view>-->
        <view class="refuse-login" @click="handleClose">稍后再说</view>
      </view>
    </u-popup>

  </view>
</template>

<script>

import {postCode} from "../../api";

export default {
  name: "index",
  data() {
    return {
      info: {},
      token: "",
      num: 0,
      userInfo: "",
      show:false,
    }
  },

  onPageScroll() {

  },

  onLoad() {

  },

  onShow() {
    this.getUserInfo()
    wx.hideHomeButton({
      success: (res) => {
      },
    })
  },

  methods: {
    async getUserInfo() {
      let params = {
        user_token: uni.getStorageSync('userToken'),
      }
      let res = await this.$api.getSimpleUserInfo(params);
      if (res.data.level == "success") {
        this.userInfo = res.data.data

        const history_url = uni.getStorageSync('history_url');
        if (history_url && history_url != "") {
          uni.removeStorageSync('history_url');
          wx.navigateTo({
            url: history_url
          })
        }
      }
    },

    handleJump(url) {
      const fullUrl = '/pages/' + url;
      wx.redirectTo({
        url: fullUrl
      })
    },

    updateInfoShow() {
      console.log(123)
      let user_token = uni.getStorageSync('userToken')
      if (!user_token){
        return
      }
      uni.showModal({
        title: '更新用户信息',
        content: '是否更新用户头像和昵称信息',
        confirmText: '更新',
        cancelColor: '#c0c4cc',
        confirmColor: '#bf6245',
        success: res => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/login/perfect'
            })
          }
        }
        })
    },

    onShareAppMessage() {
      return {
        title:"AI移动党校",
        path:'/pages/index/index',
        imageUrl:'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/dangjian/images/share.jpg'
      }
    },

    handleClose(){
      this.show = false
    },

    bindGetUserInfo(e){
      uni.showLoading()
      var This = this;
      wx.getUserProfile({
        lang : 'zh_CN',
        desc: '获取您的昵称和头像信息',
        success : res2 => {
          console.log(res2)
          This.$store.dispatch('_setWXUserInfo',res2); //将用户信息保存的VUEX
          wx.login({
            success: res => {
              const code = res.code;
              console.log(code)
              let parmas = {
                raw_data:res2.rawData,
                signature:res2.signature,
                code:code
              };
              //发送code到服务器获取数据
              postCode(parmas).then(respones => {
                console.log(respones)
                if(respones.data.level=="success"){
                  uni.setStorageSync('userToken',respones.data.data);
                  // uni.navigateBack({
                  //   delta:1
                  // })
                  // uni.redirectTo({
                  //   url:"/pages/index/index"
                  // })
                  This.show = false
                  uni.reLaunch({ url:"/pages/index/index"})
                  wx.showToast({
                    title: '登录成功',
                    icon: 'success',
                    duration: 2000
                  })
                }else{
                  uni.hideLoading()
                  uni.showToast(respones.data.message,'none',1000)
                }
              })
            },
          });
        }
      })

    },

  }
}
</script>

<style lang="scss" scoped>

.container {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  overflow-y: auto;
  width: 100%;
  margin: 0rpx;
  padding: 0rpx;
  background-color: #F6F6F6;
  height: 100%;
  display: flex;
  box-sizing: border-box;

  .userinfo-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
  }

  .title {
    z-index: 1;
    position: absolute;
    align-items: center;
    height: 170rpx;
    color: #fff;
    font-size: 36rpx;
    width: 100%;
    text-align: center;
    padding-top: 50rpx;
  }

  .userinfo {
    z-index: 1;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    width: 100%;
    height: 230rpx;
    /* margin-top: 68rpx; */
    color: #fff;

    .userinfo-content {
      display: flex;
      width: 600rpx;
      margin: 0 auto;

      .userinfo-avatar {
        max-width: 120rpx;
        max-height: 120rpx;
        //margin: 40rpx 30rpx 40rpx 0;
        margin-right: 20rpx;
        border-radius: 50%;
        overflow: hidden;
      }

      .info-box {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        font-size: 38rpx;

        .userinfo-realname {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .user-phone {
        }

        .userinfo-address {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }


        .userinfo-address {
          /*margin-top: 15rpx;*/
          font-size: 28rpx;
          /*text-indent: 204rpx;*/
        }

      }

    }
  }

  .page-items {
    z-index: 1;
  }

  .page-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 600rpx;
    /*height: 150rpx;*/
    height: 145rpx;
    margin-bottom: 20rpx;
    padding: 0 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0px 0px 19px 1px rgba(16, 150, 95, 0.1);

    .page-item-logo {
      width: 48rpx;
      height: 48rpx;
      margin-right: 20 rpx;
    }

    .page-item-title {
      flex: 1;
      font-size: 32rpx;
      font-weight: bold;
      color: #121212;
    }

    .page-item-jump {
      width: 14rpx;
      height: 24rpx;
    }
  }

  .logout {
    margin: 40rpx 0;
    font-size: 34rpx;
    color: #007457;
  }

}

.contact-style:after {
  border: none;
}

.contact-icon {
  position: fixed;
  right: 0;
  bottom: 110rpx;
  text-align: left;
  line-height: initial;
  padding: 0;
  background: none;
  transition: all .4s;
  opacity: 1;

  &:after {
    border: 0;
  }

  /*image {
    width: 88rpx;
    height: 88rpx;
  }*/
}


.popup-container {
  width: 100%;
  padding: 50rpx 50rpx 30rpx;
  background-color: #fff;

  .shopping-name {
    margin-bottom: 30rpx;
    color: #303133;
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
  }

  .login-mode {
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 20rpx;
    padding-top: 25rpx;
    background-color: #fff;
    font-size: 28rpx;
    color: #606366;
    transition: opacity .15s;
    &:active {
      opacity: .7;
    }
    .mode-icon {
      display: block;
      width: 100rpx;
      min-width: 100rpx;
      height: 100rpx;
    }
    .mask-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .desc{
      color: #333333;
      display: flex;
      flex-direction: column;

      text{
        padding-left: 10px;
        padding-top: 5px;
        font-size: 0.8rem;
      }
    }
  }

  .login-desc {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 60rpx;
    text-align: center;
    font-size: 24rpx;

    .prefix-text {
      margin-left: 45rpx;
      color: #666;
      font-size: 28rpx;
      line-height: 28rpx;
      white-space: nowrap;
    }

    .user-agreement {
      white-space: nowrap;
      color: #ef7b56;
    }
  }

  .refuse-login {
    margin-top: 40rpx;
    font-size: 28rpx;
    text-align: center;
    color: #999;
	border: 1px solid #999;
	padding: 20rpx;
	border-radius: 25rpx;
  }
}
</style>
